前一篇文章介紹了JavaScript遍歷陣列的四種方法，今天輪到 for loop 系列 ʕง•ᴥ•ʔง

for loop

這是最基本的迴圈，通常會是用來遍歷陣列或是其他可以迭代的對象，可以使用 break 結束循環或使用continue 跳出當前迴圈。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === 5) {
        console.log("Found 5! Breaking out of the loop.");
        break;  // 當找到數字 5 時，結束整個迴圈
    }

    if (numbers[i] % 2 === 0) {
        console.log("Even number, skipping to next iteration.");
        continue;  // 當數字是偶數時，跳過當前迭代，繼續下一次迴圈
    }

    console.log(numbers[i]);
}

• 當迴圈遇到數字5時，會執行break結束當前的迴圈
• 迴圈遇到偶數時，執行continue跳過當前迴圈其他的值，繼續下一次的迴圈

最後我們看到的結果就會是這樣：

1
Even number, skipping to next iteration.
3
Even number, skipping to next iteration.
Found 5! Breaking out of the loop.

for...of

語法：

for (variable of iterable) {
  // code block to be executed
}

variable：可以使用var/let/const來宣告變數
iterable：需要被遍歷的資料，除了陣列，for...of 迴圈還可以遍歷其它可迭代對象，例如 String, Map, Set, 以及自定義的可迭代對象。

• for...of為ES6之後新增的語法，相較於原本的for loop寫法較為簡潔
• 可以用 break, continue, 和 return 配合使用
• 遍歷的是值(value)

const fruits = ["apple", "banana", "cherry"];

for (const a of fruits) {
    console.log(a);
}

會得到

apple
banana
cherry

for...in

• 遍歷的是屬性也就是陣列中的鍵值(key)，也可以是索引(index)

const student = {
    name: "Allison",
    age: 25,
    grade: "A"
};

for(const a in student){
    console.log(a) // 會印出 "name" "age" "grade"
}

如果使用for...in遍歷數組，會印出索引值

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  console.log(x)
}
// 印出 0 1 2 3 4

forEach

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit, index, array) => {
    console.log(`The fruit at position ${index} is ${fruit}.`);
});

最後會輸出：

The fruit at position 0 is apple.
The fruit at position 1 is banana.
The fruit at position 2 is cherry.

• forEach接受一個callBack function 做為參數
• forEach方法不會回傳一個新陣列，它只會遍歷原本的陣列，如果需要有回傳新陣列的方法，建議使用map或filter
• 與for和for...of不同，forEach不能使用break或continue來提前跳出迴圈

forEach 提供了一種簡單的方式來遍歷陣列的每個元素，並執行某些操作。但由於其無法提前終止的特性，它可能不適合所有情境。

for...in 和 for...of 的區別

• for...in是ES5標準、for....of是ES6標準

for...of是直接遍歷值

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}
// 輸出：
// apple
// banana
// cherry

for...in主要用於遍歷物件的所有可枚舉屬性（包括原型鏈上的屬性）。

const person = {
    name: "John",
    age: 25,
    occupation: "engineer"
};

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
// 輸出：
// name: John
// age: 25
// occupation: engineer

參考文章：
ExplainThis
MDN
JavaScript中for of和for in的差別